<template>
  <view>
    <view class="prompt">
      <button @click="openPop">点击进行视力测试</button>
    </view>
    <view class="vision-tester">
      <uni-popup
        ref="popup"
        type="center"
        @change="onPopupChange"
        class="popup"
      >
        <view class="popup-content-wrapper">
          <view class="popup-intro">滑动下方窗口，回答5个E的方向</view>
          <uni-swiper-dot
            class="uni-swiper-dot-box"
            mode="dot"
            :dotsStyles="dotsStyle"
            :info="info"
            :current="current"
          >
            <swiper
              class="swiper"
              :style="cssVariables"
              :current="swiperCurrent"
              @change="bindSwiperChange"
              easing-function="easeInOutCubic"
            >
              <swiper-item
                v-for="(direction, index) in directions"
                :key="index"
              >
                <view class="e-container" :style="getRotationStyle(direction)">
                  <image
                    src="/static/questionnaire/image/E-up.svg"
                    class="image"
                    :style="cssVariables"
                  />
                </view>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
          <button
                class="mt-16 zoom-close-button"
                hover-class="zoomer-close-button-hover"
                @click="closePop"
          >关闭</button>
        </view>
      </uni-popup>
    </view>
  </view>
</template>
  
<script>
export default {
  name: "VisionTester",
  props: {
    args: {
      type: Object,
      required: true,
      validator: (value) =>
        // type: ["large", "small", "n6"] && number >=1
        value.hasOwnProperty("type") && value.hasOwnProperty("number"),
    },
    //   type: {
    //     type: String,
    //     required: true,
    //     validator: (value) => ['large', 'small', 'n6'].includes(value)
    //   },
    //   number: {
    //     type: Number,
    //     required: true,
    //     validator: (value) => value > 0
    //   }
  },
  data() {
    return {
      directions: [],
      type: this.args.type,
      number: this.args.number,
      info: [{}, {}, {}, {}, {}],
      current: 0,
      swiperCurrent: 0,
      opening: false,
      dpi: 96, // default
      cmToPxRatio: 0,
    };
  },
  computed: {
    // get the size of the image based on type
    imageSize() {
      switch (this.type) {
        case "large":
          return 4.2;
        case "small":
          return 0.8;
        case "n6":
          return 0.1;
        default:
          console.warn("Invalid type", this.type);
          return 4.2;
      }
    },
    // 动态设置 swiper 的样式
    cssVariables() {
      return {
        "--image-size": this.cmToPx(this.imageSize).toString() + "px",
        "--swiper-height": (this.cmToPx(this.imageSize) + 10).toString() + "px",
      };
    },
    // 动态设置图片的样式
    imageStyle() {
      return {
        width: "var(--image-size)",
        height: "var(--image-size)",
      };
    },
    dotsStyle() {
      return {
        backgroundColor: "rgb(255, 197, 203)",
        border: "1px rgb(255, 197, 203) solid",
        color: "#fff",
        selectedBackgroundColor: "rgba(242, 106, 119)",
        selectedBorder: "1px rgba(242, 106, 119) solid",
        bottom: "0",
      };
    },
  },
  created() {
    // 在 created 时随机生成 E 图片的旋转方向
    // this.getDeviceInfo();
    this.generateDirections();
  },
  methods: {
    getPPI() {
      // TODO: 根据不同型号进行适配
      return 460;
    },
    cmToPx(cm) {
      const ppi = this.getPPI();
      const pixelRatio = uni.getSystemInfoSync().pixelRatio || 1;
      // 1英寸=2.54厘米
      return (cm / 2.54) * ppi / pixelRatio;
    },
    // 随机生成 E 图片的旋转方向
    generateDirections() {
      const rotations = ["0deg", "90deg", "180deg", "270deg"];
      this.directions = Array.from({ length: this.number }, () => {
        const randomIndex = Math.floor(Math.random() * rotations.length);
        return rotations[randomIndex];
      });
    },
    // 根据方向获取旋转样式
    getRotationStyle(direction) {
      return {
        transform: `rotate(${direction})`,
      };
    },
    bindSwiperChange(e) {
      this.current = e.detail.current;
    },
    openPop() {
      this.opening = true;
      this.$refs.popup.open("center");
    },
    closePop() {
      this.opening = false;
      this.$refs.popup.close();
    },
    onPopupChange(e) {
      this.opening = e.show;
    },
  },
};
</script>
  
  <style scoped>
.vision-tester {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  height: var(--swiper-height);
}

.e-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: var(--image-size);
  height: var(--image-size); */
}

/* image {
  display: block;
} */

.uni-swiper-dot-box {
  width: 100%;
}

.image {
  width: var(--image-size);
  height: var(--image-size);
}

.popup-content-wrapper {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.popup-intro {
  text-align: center;
}
</style>